/**创建动态抽屉 */
import { ref, createApp, h } from "vue";
import { ElDrawer } from "element-plus";
export function createPromiseDraw(cmp, config = { title: "xxewxx" }) {
  return (options) => {
    return new Promise((resolve, reject) => {
      // 根据new Vue,创建 cmp
      const el = document.createElement("div");
      document.body.append(el);
      const drawVisibled = ref(true);
      // 公共的响应式属性，处理props问题
      function destory() {
        drawVisibled.value = false;
        // 处理动画效果
        setTimeout(() => {
          el.remove();
          app.unmount();
        }, 1000);
      }

      const app = createApp({
        render() {
          return h(
            ElDrawer,
            {
              modelValue: drawVisibled.value,
              ...config,
              "before-close"() {
                destory();
                reject();
              },
            },
            [
              h(cmp, {
                props: options,
                // 监听
                on: {
                  cancel(params) {
                    destory();
                    reject(params);
                  },
                  ok(params) {
                    destory();
                    resolve(params);
                  },
                },
              }),
            ]
          );
        },
      });
      app.mount(el);
    });
  };
}
